<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>General users</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
        <style>
            .slide {
                position: relative;
				display:block;
				float:left;
				height:100%;
				z-index:999;
            }
            .slide .inner {
				display:block;
                position: relative;
                left: 0;
                bottom: 0;
				z-index:3;
            }        
			.slide .slidetab{
				background-color:#666;
				position:relative;
				z-index:999;
				}
        #apDiv1 {
	position:absolute;
	left:12px;
	top:118px;
	width:224px;
	height:181px;
	z-index:2;
}
        </style>
        <!-- jQuery - the core -->
        <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
                    $(document).ready(function() {
                $('#slideleft button').click(function() {
                    var $lefty = $(this).next();
                    $lefty.animate({
                        left: parseInt($lefty.css('left'),10) == 0 ?
                            -$lefty.outerWidth() :
                            0
                    });
                });
            });
        </script>
        <script src="OpenLayers.js"></script>
            <script type="text/javascript">			
            var SinglePoint = OpenLayers.Class.create();
            SinglePoint.prototype = OpenLayers.Class.inherit(OpenLayers.Handler.Point, {
                createFeature: function(evt) {
                    this.control.layer.removeFeatures(this.control.layer.features);
                    OpenLayers.Handler.Point.prototype.createFeature.apply(this, arguments);
                }
            });

            var start_style = OpenLayers.Util.applyDefaults({
                externalGraphic: "img/start.png",
                graphicWidth: 18,
                graphicHeight: 26,
                graphicYOffset: -26,
                graphicOpacity: 1
            }, OpenLayers.Feature.Vector.style['default']);

            var stop_style = OpenLayers.Util.applyDefaults({
                externalGraphic: "img/stop.png",
                graphicWidth: 18,
                graphicHeight: 26,
                graphicYOffset: -26,
                graphicOpacity: 1
            }, OpenLayers.Feature.Vector.style['default']);

            var result_style = OpenLayers.Util.applyDefaults({
                strokeWidth: 3,
                strokeColor: "#ff0000",
                fillOpacity: 0
            }, OpenLayers.Feature.Vector.style['default']);

            // global variables
            var map,start, stop,result, controls;

            function init() {
                
                var saveStrategy = new OpenLayers.Strategy.Save();

                format="image/png";
                
                var bounds = new OpenLayers.Bounds(
                617817.75, 3047534.75,
                650331.75, 3077605.75
            );
                var mapextent=bounds;
                var options = {
                    controls: [],
                    maxExtent: bounds,
                    maxResolution: 127.0078125,
                    projection: "EPSG:3857",
                    units: 'm'
                };			
                map = new OpenLayers.Map('map', options);
                // setup tiled layer
                var tiled = new OpenLayers.Layer.WMS(
                "cite:ktm_roads01 - Tiled", "http://localhost:8080/geoserver/cite/wms",
                {
                    LAYERS: 'cite:ktm_roads01',
                    STYLES: '',
                    format: format,
                    tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
                },
                {
                    buffer: 0,
                    displayOutsideMaxExtent: true,
                    isBaseLayer: true
                } 
            );	
            var wfs_layer = new OpenLayers.Layer.Vector("Editable Features", {
            strategies: [new OpenLayers.Strategy.BBOX(), saveStrategy],
            //projection: new OpenLayers.Projection("EPSG:26910"),
            protocol: new OpenLayers.Protocol.WFS({
            version: "1.1.0",
            // loading data through localhost url path
            url: "http://localhost/geoserver/wfs",
            featureNS :  "http://www.opengeospatial.net/cite",
            maxExtent: mapextent,
            // layer name
            featureType: "ktm_roads01",
            // geometry column name
            geometryName: "the_geom",
            schema: "http://localhost/geoserver/wfs/DescribeFeatureType?version=1.1.0&;typename=ktm:ktm_roads01"
            })
            });

                // create and add layers to the map				
                start = new OpenLayers.Layer.Vector("Start point", {style: start_style});
                stop = new OpenLayers.Layer.Vector("End point", {style: stop_style});
                downtown = new OpenLayers.Layer.Vector("Downtown data area",
                {style: result_style});
                result = new OpenLayers.Layer.Vector("Routing results",
                {style: result_style});
                //editing toolbar
                var panel = new OpenLayers.Control.Panel(
{'displayClass': 'customEditingToolbar'}
);
                var edit = new OpenLayers.Control.ModifyFeature(wfs_layer, {
                        title: "Modify Feature",
                        displayClass: "olControlModifyFeature"
                        });

                       // var del = new DeleteFeature(wfs_layer, {title: "Delete Feature"});

                        var save = new OpenLayers.Control.Button({
                        title: "Save Changes",
                        trigger: function() {
                        if(edit.feature) {
                        edit.selectControl.unselectAll();
                        }
                        saveStrategy.save();
                        // alert('saved');
                        },
                        displayClass: "olControlSaveFeatures"
                        });

                        panel.addControls([ save, edit]);
                      //  panel.defaultControl = navigate;
                        map.addControl(panel);
                
                

                // controls
                map.addControl(new OpenLayers.Control.LayerSwitcher());
                map.addControl(new OpenLayers.Control.MousePosition()); 
                map.addControl(new OpenLayers.Control.Navigation());
                //map.addControl(new OpenLayers.Control.sa)
                map.addControl(new OpenLayers.Control.PanZoomBar({
                    position: new OpenLayers.Pixel(2, 15)
                }));			
                controls = {
                    start: new OpenLayers.Control.DrawFeature(start, SinglePoint),
                    stop: new OpenLayers.Control.DrawFeature(stop, SinglePoint)
                }
                for (var key in controls) {
                    map.addControl(controls[key]);
                }
                map.addLayers([tiled, start, stop,result,wfs_layer]);	
				
                // set default position
                map.zoomToExtent(bounds);
            }

            function toggleControl(element) {
                for (key in controls) {
                    if (element.value == key && element.checked) {
                        controls[key].activate();
                    } else {
                        controls[key].deactivate();
                    }
                }
            }

            function compute() {
                var startPoint = start.features[0];
                var stopPoint = stop.features[0];
                //alert(startPoint.geometry.x+","+startPoint.geometry.y);
                if (startPoint && stopPoint) {
                    var result = {
                        startpoint: startPoint.geometry.x + ' ' + startPoint.geometry.y,
                        finalpoint: stopPoint.geometry.x + ' ' + stopPoint.geometry.y,
                        method: OpenLayers.Util.getElement('method').value,
                        region: "ktm_roads01",
                        srid: "3857"
                    };
                    OpenLayers.loadURL("shortestpath.jsp?"+
                        OpenLayers.Util.getParameterString(result),'',
                    null,
                    displayRoute);
                }
            }

            function displayRoute(response) {
//                alert("in");
                if (response && response.responseXML) {
                    alert("in");
//                    alert(response.responseXML.getElementsByTagName("wkt").textContent);
                    // erase the previous results
                    result.removeFeatures(result.features);

                    // parse the features
                    var parser = new OpenLayers.Format.WKT(map.baseLayer.projection);
                    //                    var line1="POINT(628994.4375 3062887.7695313)";
                    //                    alert(line1);
                    //                    var features=parser.read(line1);
                    var edges = response.responseXML.getElementsByTagName('edge');
                    var features = [];
                    for (var i = 0; i < edges.length; i++) {
                        var g = parser.read(edges[i].getElementsByTagName('wkt')[0].textContent);
                        features.push(g);
                    }
                    result.addFeatures(features);
                }
            }
			</script>        
    </head>

<body onload="init();">
        <!-- header starts-->
        <div id="header-wrap">
          <div id="user_thumbs" class="thumbs"><img src="images/gravatar.jpg" /></div>
        <div id="user_info" class="container_user_info">${loginForm.userName}</div>
        <div id="user_tools">
            <input type="radio" name="control" id="noneToggle"
                   onclick="toggleControl(this);" checked="checked" />
            <label for="noneToggle">navigate</label>
            <input type="radio" name="control" value="start" id="startToggle"
                   onclick="toggleControl(this);" />
            <label for="startToggle">set start point</label>
            <input type="radio" name="control" value="stop" id="stopToggle"
                   onclick="toggleControl(this);" />
          <label for="stopToggle">set stop point</label>
          <input type="hidden" name="method" id="method" value="SPD" />
            <button onclick="compute()">Calculate Route</button>
        </div>
            <div id="header" class="container_16">		
                <%@ include file="../../Templates/header.html" %>
            </div>    
</div>
        <!-- content starts -->

        <div id="content-outer">
            <div id="content-wrapper" class="container_16">
             <div id='map' style='width: 950px; height: 550px;'></div>
            </div>
        </div>
        <!-- content ends here -->
        <div id="docs">
        </div>
        <!-- footer starts here -->	
        <%@ include file="../../Templates/footer.html" %>
        <!-- footer ends here -->

    </body>
</html>
